<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="ionic-lib/css/ionic.min.css">
    <script src="ionic-lib/js/ionic.bundle.min.js"></script>
    <title>Title</title>
    <style>
        .col img{
            width: 48px;
            height: 48px;
        }
        .col{
            text-align: center;
        }
    </style>
</head>

<body ng-controller="ctl">
<ion-header-bar class="bar-positive">
    <a class="button button-clear icon ion-person"></a>
    <h1 class="title">我的生活</h1>
    <a class="button button-clear icon ion-more"></a>
</ion-header-bar>
<ion-content padding="10">

    <div class="row">
        <div class="col">
            <img src="life/img/220220/cloth.jpg">
            <p>衣</p>
        </div>
        <div class="col">
            <img src="life/img/220220/cloth.jpg">
            <p>衣</p>
        </div>
        <div class="col">
            <img src="life/img/220220/cloth.jpg">
            <p>衣</p>
        </div>
        <div class="col">
            <img src="life/img/220220/cloth.jpg">
            <p>衣</p>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <img src="life/img/220220/cloth.jpg">
            <p>衣</p>
        </div>
        <div class="col">
            <img src="life/img/220220/cloth.jpg">
            <p>衣</p>
        </div>
        <div class="col">
            <img src="life/img/220220/cloth.jpg">
            <p>衣</p>
        </div>
        <div class="col">
            <img src="life/img/220220/cloth.jpg">
            <p>衣</p>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <img src="life/img/220220/cloth.jpg">
            <p>衣</p>
        </div>
        <div class="col">
            <img src="life/img/220220/cloth.jpg">
            <p>衣</p>
        </div>
        <div class="col">
        </div>
        <div class="col">
        </div>
    </div>

    <ion-list class="list list-inset">
        <ion-item class="item-divider">
            <h3>热门推荐</h3>
        </ion-item>
        <ion-item class="item-thumbnail-left" ng-repeat="special in specialList">
            <img ng-src="{{special.img}}">
            <h2>{{special.loc}}</h2>
            <i class="icon ion-android-star {{special.star[0]}}"></i>
            <i class="icon ion-android-star {{special.star[1]}}"></i>
            <i class="icon ion-android-star {{special.star[2]}}"></i>
            <i class="icon ion-android-star {{special.star[3]}}"></i>
            <i class="icon ion-android-star {{special.star[4]}}"></i>
            <h2>人均消费 <font color="red">{{special.spend}}</font> 元</h2>
            <h3><font color="#a9a9a9">{{special.reservation}}人已领 &nbsp;&nbsp;&nbsp;
            {{special.distance}}km</font></h3>
        </ion-item>
    </ion-list>

</ion-content>

</body>

<script>

    angular.module('myapp', ['ionic'])
            .controller('ctl', function($scope) {
                var specials = [
                    { id: 11, type: '1', img: 'life/img/logo/kfc.jpg', loc: '肯德基（顺义隆华店）', star: ['energized','energized','energized','energized','energized'], spend: 27, reservation: 156, distance: 1.8, display: true},
                    { id: 12, type: '1', img: 'life/img/logo/McDonalds.jpg', loc: '麦当劳（顺义西单店）', star: ['energized','energized','energized','energized','dark'], spend: 36, reservation: 226, distance: 2.1, display: true},
                    { id: 13, type: '1', img: 'life/img/logo/pizza.jpg', loc: '必胜客（顺义新世界店）', star: ['energized','energized','energized','energized','energized'], spend: 78, reservation: 33, distance: 2.2, display: true},
                    { id: 14, type: '1', img: 'life/img/logo/qiaojiangnan.jpg', loc: '俏江南（顺义新世界店）', star: ['energized','energized','energized','energized','dark'], spend: 108, reservation: 33, distance: 2.2, display: true},
                    { id: 15, type: '1', img: 'life/img/logo/haidilao.jpg', loc: '海底捞（顺义新世界店）', star: ['energized','energized','energized','energized','energized'], spend: 88, reservation: 123, distance: 2.2, display: true},
                    { id: 16, type: '1', img: 'life/img/logo/xiabu.jpg', loc: '呷哺（顺义宜宾店）', star: ['energized','energized','energized','energized','energized'], spend: 50, reservation: 133, distance: 3.8, display: true},
                    { id: 21, type: '2', img: 'life/img/logo/alibuyi.jpg', loc: '阿布莱依（顺义隆华店）', star: ['energized','energized','energized','energized','energized'], spend: 27, reservation: 156, distance: 1.8, display: true},
                    { id: 22, type: '2', img: 'life/img/logo/angwei.jpg', loc: '昂威（顺义西单店）', star: ['energized','energized','energized','energized','dark'], spend: 36, reservation: 226, distance: 2.1, display: true},
                    { id: 23, type: '2', img: 'life/img/logo/palma.jpg', loc: '彪马（顺义新世界店）', star: ['energized','energized','energized','energized','energized'], spend: 78, reservation: 33, distance: 2.2, display: true},
                    { id: 24, type: '2', img: 'life/img/logo/taizilong.jpg', loc: '太子龙（顺义新世界店）', star: ['energized','energized','energized','energized','dark'], spend: 108, reservation: 33, distance: 2.2, display: true},
                    { id: 25, type: '2', img: 'life/img/logo/yiyi.jpg', loc: '依依（顺义新世界店）', star: ['energized','energized','energized','energized','energized'], spend: 88, reservation: 123, distance: 2.2, display: true},
                    { id: 26, type: '2', img: 'life/img/logo/yifanni.jpg', loc: '依凡尼（顺义宜宾店）', star: ['energized','energized','energized','energized','energized'], spend: 50, reservation: 133, distance: 3.8, display: true},
                    { id: 31, type: '3', img: 'life/img/logo/kfc.jpg', loc: '肯德基（顺义隆华店）', star: ['energized','energized','energized','energized','energized'], spend: 27, reservation: 156, distance: 1.8, display: true},
                    { id: 32, type: '3', img: 'life/img/logo/McDonalds.jpg', loc: '麦当劳（顺义西单店）', star: ['energized','energized','energized','energized','dark'], spend: 36, reservation: 226, distance: 2.1, display: true},
                    { id: 33, type: '3', img: 'life/img/logo/pizza.jpg', loc: '必胜客（顺义新世界店）', star: ['energized','energized','energized','energized','energized'], spend: 78, reservation: 33, distance: 2.2, display: true},
                    { id: 34, type: '3', img: 'life/img/logo/qiaojiangnan.jpg', loc: '俏江南（顺义新世界店）', star: ['energized','energized','energized','energized','dark'], spend: 108, reservation: 33, distance: 2.2, display: true},
                    { id: 35, type: '3', img: 'life/img/logo/haidilao.jpg', loc: '海底捞（顺义新世界店）', star: ['energized','energized','energized','energized','energized'], spend: 88, reservation: 123, distance: 2.2, display: true},
                    { id: 36, type: '3', img: 'life/img/logo/xiabu.jpg', loc: '呷哺（顺义宜宾店）', star: ['energized','energized','energized','energized','energized'], spend: 50, reservation: 133, distance: 3.8, display: true}
                ];
                $scope.specialList = specials;
            });

</script>
</html>